---
title: Toggle
description: "`Toggle` is a component that has two states: on or off."
storybook: components-toggle--basic
source: components/toggle
style: components/toggle/toggle.style.ts
---

```tsx preview
<Toggle icon={<BoldIcon />} aria-label="Toggle bold" />
```

## Usage

:::code-group

```ts [Package]
import { Toggle, ToggleGroup } from "@yamada-ui/react"
```

```ts [Alias]
import { Toggle, ToggleGroup } from "@/components/ui"
```

```ts [Monorepo]
import { Toggle, ToggleGroup } from "@workspaces/ui"
```

:::

```tsx
<Toggle />
```

```tsx
<ToggleGroup.Root>
  <ToggleGroup.Item />
</ToggleGroup.Root>
```

### With Text

```tsx preview
<Toggle px="4">
  <ItalicIcon />
  <Text as="span" fontSize="md">
    Italic
  </Text>
</Toggle>
```

### Change Variant

```tsx preview
<Wrap gap="md">
  <For each={["ghost", "subtle", "surface", "outline", "solid"]}>
    {(variant) => (
      <Toggle
        key={variant}
        icon={<BoldIcon />}
        aria-label="Toggle bold"
        variant={variant}
      />
    )}
  </For>
</Wrap>
```

### Change Size

```tsx preview
<Wrap gap="md" alignItems="flex-start">
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size) => (
      <Toggle
        key={size}
        icon={<BoldIcon />}
        aria-label="Toggle bold"
        size={size}
      />
    )}
  </For>
</Wrap>
```

### Change Color Scheme

```tsx preview
<Wrap gap="md">
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Toggle
        key={colorScheme}
        colorScheme={colorScheme}
        aria-label="Toggle bold"
        icon={<BoldIcon />}
      />
    )}
  </For>
</Wrap>
```

### Change Shape

To change the shape, set the `rounded` prop.

```tsx preview
<Wrap gap="md">
  <For each={["ghost", "subtle", "surface", "outline", "solid"]}>
    {(variant) => (
      <Toggle
        key={variant}
        icon={<BoldIcon />}
        aria-label="Toggle bold"
        variant={variant}
        fullRounded
      />
    )}
  </For>
</Wrap>
```

### Disable

To disable, set `disabled` to `true`.

```tsx preview
<Wrap gap="md">
  <For each={["ghost", "subtle", "surface", "outline", "solid"]}>
    {(variant) => (
      <Toggle
        key={variant}
        icon={<BoldIcon />}
        aria-label="Toggle bold"
        variant={variant}
        disabled
      />
    )}
  </For>
</Wrap>
```

### Read-Only

To read-only, set `readOnly` to `true`.

```tsx preview
<Wrap gap="md">
  <For each={["ghost", "subtle", "surface", "outline", "solid"]}>
    {(variant) => (
      <Toggle
        key={variant}
        icon={<BoldIcon />}
        aria-label="Toggle bold"
        variant={variant}
        readOnly
      />
    )}
  </For>
</Wrap>
```

### Invalid

To set invalid state, set `invalid` to `true`.

```tsx preview
<Wrap gap="md">
  <For each={["ghost", "subtle", "surface", "outline", "solid"]}>
    {(variant) => (
      <Toggle
        key={variant}
        icon={<BoldIcon />}
        aria-label="Toggle bold"
        variant={variant}
        invalid
      />
    )}
  </For>
</Wrap>
```

### Change Invalid Border Color

To change the border color, set `errorBorderColor` to the color.

```tsx preview
<Toggle
  aria-label="Toggle bold"
  errorBorderColor="orange.500"
  icon={<BoldIcon />}
  defaultChecked
  invalid
/>
```

### Control

```tsx preview functional client
const [checked, setChecked] = useState<boolean>(false)

return (
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    checked={checked}
    onChange={setChecked}
  />
)
```

### Grouping

```tsx preview
<ToggleGroup.Root>
  <ToggleGroup.Item value="bold" icon={<BoldIcon />} aria-label="Toggle bold" />
  <ToggleGroup.Item
    value="italic"
    icon={<ItalicIcon />}
    aria-label="Toggle italic"
  />
  <ToggleGroup.Item
    value="underline"
    icon={<UnderlineIcon />}
    aria-label="Toggle underline"
  />
</ToggleGroup.Root>
```

For multiple selections, set `value` or `defaultValue` to an array.

```tsx preview functional client
const [value, setValue] = useState<string[]>([])

return (
  <ToggleGroup.Root value={value} onChange={setValue}>
    <ToggleGroup.Item
      value="bold"
      icon={<BoldIcon />}
      aria-label="Toggle bold"
    />
    <ToggleGroup.Item
      value="italic"
      icon={<ItalicIcon />}
      aria-label="Toggle italic"
    />
    <ToggleGroup.Item
      value="underline"
      icon={<UnderlineIcon />}
      aria-label="Toggle underline"
    />
  </ToggleGroup.Root>
)
```

## Props

<PropsTable name="toggle" all omit={["ToggleGroupRoot"]} />

## Accessibility

Currently, this section is being updated due to the migration of v2.
